/* 动画定义 - 从顶部向中间生长 */
@keyframes lineGrowFromTop {
  from {
    height: 0;
  }
  to {
    height: var(--dynamic-line-height);
  }
}

/* 动画定义 - 从底部向中间生长 */
@keyframes lineGrowFromBottom {
  from {
    height: 0;
  }
  to {
    height: var(--dynamic-line-height);
  }
}

/* 竖排文字工具类 */
.writing-vertical-rl {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: fit-content;
}

/* 顶部线条向外收缩动画 */
@keyframes lineShrinkToTop {
  from {
    height: var(--dynamic-line-height);
  }
  to {
    height: 0;
  }
}

/* 底部线条向外收缩动画 */
@keyframes lineShrinkToBottom {
  from {
    height: var(--dynamic-line-height);
  }
  to {
    height: 0;
  }
}

/* 正文淡入动画 */
@keyframes contentFadeIn {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

/* 名字出现动画 */
@keyframes nameShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 名字消失动画 */
@keyframes nameHide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 顶部线条动画：先生长，再收缩 */
.line-top-animation-full {
  animation: lineGrowFromTop var(--line-enter-animation-duration) ease-out
      forwards,
    lineShrinkToTop var(--line-exit-animation-duration) ease-in forwards
      var(--line-exit-display-time);
}

/* 底部线条动画：先生长，再收缩 */
.line-bottom-animation-full {
  animation: lineGrowFromBottom var(--line-enter-animation-duration) ease-out
      forwards,
    lineShrinkToBottom var(--line-exit-animation-duration) ease-in forwards
      var(--line-exit-display-time);
}

/* 正文动画：在所有动画完成后显示 */
.content-animation {
  animation: contentFadeIn var(--content-animation-duration) ease-out forwards
    var(--content-display-time);
}

/* 左边文字滑入动画 */
@keyframes leftSlideIn {
  from {
    right: -100%;
  }
  to {
    right: 0;
  }
}

/* 右边文字滑入动画 */
@keyframes rightSlideIn {
  from {
    left: -100%;
  }
  to {
    left: 0;
  }
}

/* 名字容器完整动画：显示 + 隐藏 */
.name-container-animation {
  animation: nameShow var(--name-animation-duration) ease-out forwards,
    nameHide var(--name-exit-animation-duration) ease-in forwards;
  animation-delay: var(--name-animation-display-time),
    var(--name-exit-display-time);
}

/* 左边文字动画类 */
.left-name-animation-duration {
  animation: leftSlideIn var(--alternating-char-move-duration) ease-out forwards;
  animation-delay: var(--name-animation-display-time);
}

/* 右边文字动画类 */
.right-name-animation-duration {
  animation: rightSlideIn var(--alternating-char-move-duration) ease-out
    forwards;
  animation-delay: var(--name-animation-display-time);
}
